<template>
  <div>
    <div class="msg-time" v-if="showDate">
      <span>{{$moment(date).format('yyyy-MM-DD HH:mm')}}</span>
    </div>
    <div class="msg-item">
      <div class="msg-item-main">
        <div class="msg-username">{{name}}</div>
        <div class="msg-text">
          <div class="msg-text-value" style="float:right;">
            <div v-if="type=='text'" v-html="value" style="display:flex;flex-wrap: wrap;"></div>
            <el-image v-if="type=='image'" style="max-height:200px;max-width:200px;" :preview-src-list="[]" :src="a"/>
            <video v-if="type=='video'" style="max-height:200px;max-width:200px;" :src="'/api/'+value.url" controls='controls'/>
            <audio-player v-if="type=='audio'" source="me" :value="value.audio" :time="value.time" />
            <file-private v-if="type=='file'" :fileName="value.name" :size="value.size" :url="'/api/'+value.url" />
          </div>
          <div class="msg-tail"></div>
        </div>
      </div>
      <div class="msg-icon" @click="userInfo">
        <el-avatar :size="32" shape="square" v-if="icon.indexOf('/')<0" :icon="icon"></el-avatar>
        <el-avatar :size="32" shape="square" v-else :src="icon"></el-avatar>
      </div>
    </div>
  </div>
</template>

<script>
import AudioPlayer from './msgObject/AudioPlayer'
import FilePrivate from './msgObject/FilePrivate.vue'
export default {
  components:{AudioPlayer, FilePrivate},
  props:{
    id:{type:[String,Number],required:true},
    name:{type:String,default:'匿名'},
    icon:{type:String,default:'el-icon-user-solid'},
    value:{type:[String,Object],required:true},
    time:{type:Number,default:0},  //发送语音的时长
    type:{type:String,default:'text',validator:val=>{
      if (['text','audio','video','file','image','system','approval'].indexOf(val)<0){
        console.error("组件MsgItemMe的type属性只允许为'text','audio','video','file','image','web','system','approval',当前值:"+val)
        //TODO: 需要增加system、approval、file消息类型，用于系统提醒、流程审批以及文件下载
        return false
      }
      return true
    }},
    date:{type:[Date,String],default:'2021-01-22 21:00:00'},  //发送时间
    showDate:{type:Boolean,default:true}  //是否显示时间
  },
  methods:{
    userInfo(e){
      this.$emit('userInfo',this.id,typeof this.type=='undefined' ? 'text' : this.type)
    }
  },
  mounted(){
    console.log(this.value)
  }
}
</script>

<style lang="less" scoped>
.msg-time {
  text-align: center;
  font-size: 10px;
  span {
    background-color: #aaa;
    border-radius:3px;
    padding: 0px 10px;
    color:#fff;
  }
}
.msg-item {
  display: flex;
  margin-bottom: 30px;
}
.msg-icon {
  justify-content: end;
  flex: 0 0 32px;
  width: 32px;
  margin-left: 10px;
  margin-top:10px;
  cursor: pointer;
}
.msg-item-main {
  justify-content: start;
  width: 100%;
  text-align: right;
}
.msg-username {
  font-size: 10px;
  color:#aaa;
}
.msg-text {
  display: flex;
  text-align: right;
  float: right;
}
.msg-text-value {
  display:inline-block;
  width: fit-content;
  padding: 5px 10px;
  background-color: #67c23a;
  border-radius: 5px;
  font-size: 12px;
  text-align: left;
}
.msg-tail {
  justify-content: start;
  flex: 0 0 0px;
  margin-top: 10px;
  height: 0px;
  border-style: solid;
  border-width: 0px 0px 10px 10px;
  border-color: transparent transparent transparent #67c23a;
  width: 0px;
}
</style>
